<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div id="main"></div>
    <div class="fixed bottom-2 left-2">
      <div class="px-3 py-1 bg-blue-500 text-white rounded-md" @click="onZoomInClick">放大</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core'
import * as PIXI from 'pixi.js'
import { onMounted } from 'vue'

// usevue 获取屏幕宽高
const { width, height } = useWindowSize()

let bgSprite = undefined
let dog2Sprite: PIXI.Sprite | undefined = undefined


onMounted(async () => {
  // 1、创建 pixi画布
  const app = new PIXI.Application()
  // 2、初始化画布(resolution: 不同的分辨率和像素密度的平台上运行变得简单)
  await app.init({
    width: width.value,
    height: height.value,
    backgroundColor: 'skyblue',
    resolution: 1,
    resizeTo: window
  })

  const main = document.getElementById('main')
  // 将画布添加到d1元素里
  main!.appendChild(app.canvas)

  // const bgImg = new PIXI.BaseTexture.from('./images/dog.jpg')
  // bgImg.width = 750
  // bgImg.height = 1334
  // bgImg.position.set(0, 0)
  // bgImg.name='bg'
  // app.stage.addChild(bgImg)

  // 同时加载PIXI多个图片

  await PIXI.Assets.load([{alias: 'bg', src: './images/bg.jpg'}, {alias: 'dog2', src: './images/pet2.png'}, {alias: 'dog6', src: './images/pet6.png'}])



  bgSprite = new PIXI.Sprite(PIXI.Assets.get('bg'))
  bgSprite.width = width.value
  bgSprite.height = height.value
  bgSprite.position.set(0, 0)
  bgSprite.name = 'bg'
  app.stage.addChild(bgSprite)

  dog2Sprite = new PIXI.Sprite(PIXI.Assets.get('dog2'))
  dog2Sprite.width = 150
  dog2Sprite.height = 150
  dog2Sprite.position.set(120, 550)
  dog2Sprite.name = 'dog2'
  app.stage.addChild(dog2Sprite)


 const rect = createRect()
  app.stage.addChild(rect)

})

const createRect = () => {
  // 创建图形类
  const graphics = new PIXI.Graphics()
  // 设置填充颜色 beginFill(颜色, 不透明度)
  graphics.beginFill(0xffd900, 1)
  // 创建圆角矩形
  graphics.drawRoundedRect(10, 50, 100, 50, 3) // 最后一个参数是圆角半径
  // 绘制操作
  graphics.endFill()
  return graphics

 }

 const onZoomInClick = () => {
  if (dog2Sprite) {
    dog2Sprite.scale.set(1.5)
  }
}
</script>

<style scoped>
canvas {
 width: 100%;
}
</style>
